<template>
  <div class="rank-item">
    <a-row :gutter="16">
      <a-col :span="24">
        <div style="padding: 6px 6px 0;font-weight: 800;">部门排名</div>
      </a-col>
      <a-col :span="12">
        <div class="item-list">
          <div class="item-title">
            <span>已结束流程数 TOP3</span>
          </div>
          <a-table :columns="columns" bordered rowKey="departId" :data-source="tableData" :pagination="false"
            :customRow="(arg) => { return customRow(arg,'depart') }">
            <template slot='key' slot-scope="text, record,index">
              <span :class="index === 0 ? 'rank first' : index === 1 ? 'rank second' : index === 2 ? 'rank third' : ''">{{
                index + 1 }}</span>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col :span="24">
        <div style="padding: 0 6px;font-weight: 800;">人员排名</div>
      </a-col>
      <a-col :span="12" v-for="(item,index) in rankList" :key="index+'1'">
        <div class="item-list">
          <div class="item-title">
            <span>{{ item.label }} TOP3</span>
          </div>
          <a-table :columns="item.columns" bordered rowKey="userName" :data-source="item.tableData"
            :pagination="false" :customRow="(arg) => { return customRow(arg, 'user') }">
            <template slot='key' slot-scope="text, record,index">
              <span :class="index === 0 ? 'rank first' : index === 1 ? 'rank second' : index === 2 ? 'rank third' : ''">{{
                index + 1 }}</span>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import { getAction } from '@/api/manage';
import moment from 'dayjs'
import { BoardMixin } from './boardMixin'
const columns_1 = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'key' },
  },
  {
    title: '人员',
    dataIndex: 'userName',
    align: 'center',

  },
  {
    title: '结束数',
    dataIndex: 'num',
    align: 'center',
  },

];
const columns_2 = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'key' },
  },
  {
    title: '人员',
    dataIndex: 'userName',
    align: 'center',

  },
  {
    title: '被催办次数',
    dataIndex: 'num',
    align: 'center',
  },

];
const columns = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'key' },
  },
  {
    title: '部门',
    dataIndex: 'departName',
    align: 'center',

  },
  {
    title: '结束数',
    dataIndex: 'finishedCount',
    align: 'center',
  },

];

export default {
  mixins: [BoardMixin],
  data() {
    return {
      rankList: [
        {
          key: 1,
          label: "已结束流程数",
          value: "complete",
          columns: columns_1,
          tableData: [],
        },
        {
          key: 2,
          label: "被催办次数",
          value: "completeTime",
          columns: columns_2,
          tableData: [],
        }
      ],
      tableData: [],
      columns,
    }
  },
  props: {
    time: {
      type: Array,
      default: () => []
    },
  },
  watch: {
    time: {
      handler() {
        this.init()
      },
      deep: true,
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let startTime = `${moment(this.time[0]).format('YYYY-MM')}-01`
      let endTime = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
      getAction('/api/erpmng/sys/departProcessRank/finishedRankByDepartTOP3', { startTime, endTime }).then(res => {
        if (res.success) {
          this.tableData = res.result || []
        }
      })
      getAction('/api/erpmng/sys/board/processUserRankAll', { startTime, endTime }).then(res => {
        if (res.success) {
          this.$set(this.rankList[0], 'tableData', res.result.endProcesses || [])
          this.$set(this.rankList[1], 'tableData', res.result.notifications || [])
        }
      })
    },
    // table 双击查看详情
    customRow(record, type) {
      const _this = this
      return {
        on: {
          // 事件
          dblclick: () => {
            _this.$emit('processTaskModal', type)
          },
          click: () => {
            _this.$emit('processTaskModal', type)
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.rank-item {
  background-color: #fff;

  .item-list {
    padding: 6px;
    // background-color: #fff;
    margin-bottom: 16px;

    .item-title {
      margin-bottom: 10px;
    }

    ::v-deep {
      .ant-table-tbody .ant-table-row td {
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .ant-table-thead>tr>th,
      .ant-table-tbody>tr>td {
        padding: 8px 16px;
      }
    }

    .rank {
      display: inline-block;
      border-radius: 50%;

      font-size: 12px;
      height: 20px;
      width: 20px;
      text-align: center;
      line-height: 20px;
      color: #fff;
    }

    .first {
      background-color: #ff5b00;
    }

    .second {
      background-color: #ff8b00;
    }

    .third {
      background-color: #ff9e00;
    }
  }
}</style>